<template>
  <div>
    <wang-header></wang-header>
    <div class="wrapper">
      <ul class="list">
        <li class="listLi" v-for="item in aList">
          <router-link :to="item.path">
            <h4 class="listH4">{{item.title}}</h4>
          </router-link>
        </li>
      </ul>
      <router-view class="right"></router-view>
    </div>
    <wang-footer></wang-footer>
  </div>
</template>
<script>
  import WangHeader from '../../components/WangHeader/WangHeader'
  import WangFooter from '../../components/WangFooter/WangFooter'
  export default {
    name: 'fenlei',
    components: {
      WangHeader,
      WangFooter
    },
    data() {
      return {
        aList: [
          {
            title: '为您推荐',
            path: '/fenlei/weinintuijian'
          },
          {
            title: '面部护理',
            path: '/fenlei/mianbuhuli'
          },
          {
            title: '底妆彩妆',
            path: '/fenlei/dizhuangcaizhuang'
          },
          {
            title: '休闲零食',
            path: '/fenlei/xiuxianlingshi'
          },
          {
            title: '身体护理',
            path: '/fenlei/shentihuli'
          },
          {
            title: '美容美发',
            path: '/fenlei/meirongmeifa'
          },
          {
            title: '生活用品',
            path: '/fenlei/shenghuoyongpin'
          },
          {
            title: '个人护理',
            path: '/fenlei/gerenhuli'
          },
          {
            title: '保健养生',
            path: '/fenlei/baojianyangsheng'
          },
          {
            title: '时尚潮品',
            path: '/fenlei/shishangchaopin'
          },
          {
            title: '母婴用品',
            path: '/fenlei/muyingyongpin'
          }
        ]
      }
    },
    methods: {
      doClick(i) {
        this.$refs.line.style.left = (4 * i + 1.33) + 'rem'
      }
    }
  }
</script>
<style scoped>
  .wrapper{
    display: flex;
    background: #fff;
    height: 100%;
  }
  .right{
    flex: 1;
  }
  .list{
    flex: none;
    width: 4rem;
    border-right: 1px solid #ccc;
    text-align: center;
  }
  .listLi{
    height: 1.78rem;
    padding: 0.44rem 0;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
  }
  .listH4{
    line-height: 0.89rem;
    font-size: 0.67rem;
    color: #4d4d4d;
    font-weight: normal;
    font-stretch: normal;
    border-right: 2px solid transparent;
  }
  .router-link-active h4{
    border-right: 2px solid #e53e42;
    color: #e83d41;
  }
</style>
